<template>
  <view class="page ui-form-basic">
		<view class="form-subtitle">商城主题</view>
		<fui-radio-group class="plan-list" name="radio" v-model="checkedTheme">
      <view class="plan-list-item" v-for="item in mallThemes" :key="item.value">
        <fui-label>
          <image class="img" :src="item.url" mode=""></image>
          <view class="bottom">
            <view class="fui-list__item">
              <view class="fui-align__center">
                <fui-radio class="radio" scaleRatio="0.8" :value="item.value"></fui-radio>
                <text class="fui-text">{{ item.text }}</text>
              </view>
            </view>
          </view>
        </fui-label>
      </view>
    </fui-radio-group>
    <view class="btn-wrapper">
      <fui-button text="保存" height="78rpx" radius="8rpx" @click="handleSubmit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const { mallThemes } = store.getters
const checkedTheme = ref('violet')

onLoad(option => {
  checkedTheme.value = option.currentTheme
})

const handleSubmit = async () => {
  uni.$emit('onCheckedTheme', checkedTheme.value)
  tab.navigateBack()
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/form.scss";

.form-subtitle {
	margin: 36rpx 0;
	font-size: 40rpx;
	font-weight: bold;
	color: #333333;
}

.plan-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  margin-bottom: 40rpx;
  padding: 20rpx;
  &-item {
    flex: 0 0 calc(33.3333% - 20rpx);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #333333;
    .fui-label__box {
      width: 100%;
    }
    .img {
      width: 100%;
      height: 480rpx;
    }
    .bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 24rpx 0 30rpx;

      .fui-align__center {
        display: flex;
        align-items: center;
        .radio {
          margin-right: 8rpx;
        }
      }
    }
  }
}
</style>
